<template>
  <div style="width: 100%; height: 100%">
    <div id="container" style="width: 100%; height: 100%"></div>
    <div style="margin-top: 10px">
      <button
        @click="startDrawing"
        v-if="
          currentStatus === current_status.created ||
          currentStatus === current_status.clear
        "
      >
        开始绘制圆
      </button>
      <button
        @click="editCircle"
        v-if="currentStatus === current_status.submit"
      >
        编辑圆
      </button>
      <button @click="submit" v-if="currentStatus === current_status.edit">
        完成绘制
      </button>
      <button @click="clearCircle">清除圆</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { load } from '@amap/amap-jsapi-loader'
import { ElMessage } from 'element-plus'

let AMap = ref<any>(null)
const map = ref<any>(null)
const circle = ref<any>(null)
const mousetool = ref<any>(null)
const circleEditor = ref<any>(null)
// 设置枚举值：'circle'、'edit'、'clear'
enum current_status {
  created = 'created',
  edit = 'edit',
  submit = 'submit',
  clear = '',
}

let currentStatus = ref<string>('')

onMounted(() => {
  initMap()
})

const initMap = async () => {
  currentStatus.value = current_status.created
  AMap.value = await load({
    key: '4b47c3b15b2c298a9d9e174be21d7ee7', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map('container', {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 13, // 初始化地图级别
    // center:[113.808299,34.791787], // 初始化地图中心点位置，不设置的时候默认展示当前位置
  })
}

const startDrawing = () => {
  clearCircle()
  currentStatus.value = current_status.created
  map.value.plugin(['AMap.MouseTool'], function () {
    mousetool.value = new AMap.value.MouseTool(map.value)
    // 使用鼠标工具，在地图上画标记点
    mousetool.value.circle()
    mousetool.value.on('draw', function (e: any) {
      // 获取圆形的经纬度和半径
      let center = e.obj.getCenter()
      let radius = e.obj.getRadius()
      if (radius <= 0) return ElMessage.warning('半径不能小于等于0')
      console.log('中心点:', center)
      console.log('半径:', radius)
      circle.value = new AMap.value.Circle({
        center: [center.lng, center.lat], // 圆心位置
        radius: radius || 0, //半径
        borderWeight: 3,
        strokeColor: '#FF33FF',
        // strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50,
      })
      // map.value.add(circle)
      //圆形 Circle 对象添加到 Map
      map.value.add(circle.value)
      //根据覆盖物范围调整视野
      map.value.setFitView([circle.value])
      mousetool.value.close(true)
      editCircle()
    })
  })
}

const editCircle = () => {
  if (!circle.value) return
  currentStatus.value = current_status.edit
  if (mousetool.value) mousetool.value.close(true)
  //引入圆形编辑器插件
  map.value.plugin(['AMap.CircleEditor'], function () {
    //实例化圆形编辑器，传入地图实例和要进行编辑的圆形实例
    circleEditor.value = new AMap.value.CircleEditor(map.value, circle.value)
    //开启编辑模式
    circleEditor.value.open()
    circleEditor.value.on('move', function (event: any) {
      // event.target 即为编辑后的图形对象，包含图形的相关数据和方法
      event.target.getCenter().lat.toFixed(7) //获取圆心经度
    })
    console.log(circleEditor.value.getTarget())
  })
}

const submit = () => {
  if (!circle.value) return
  currentStatus.value = current_status.submit
  if (circleEditor.value) circleEditor.value.close()
  if (mousetool.value) mousetool.value.close(true)
  //根据覆盖物范围调整视野
  map.value.setFitView([circle.value])
}

const clearCircle = () => {
  if (mousetool.value) mousetool.value.close(true)
  if (circleEditor.value) circleEditor.value.close()
  if (circle.value) map.value.remove(circle.value)
  circle.value = null
  currentStatus.value = current_status.clear
}
</script>

<style scoped>
button {
  margin-right: 10px;
  padding: 8px 12px;
  font-size: 16px;
}
</style>
